<template>
  <div class="vux-demo">
    <div style="padding: 10px;">
      <br>
      <div style="height:10px;" class="vux-1px-tb"></div>
      <br>
      <div style="height:10px;" class="vux-1px"></div>
      <br>
      <p>{{ $t('对比不做处理的1px边框') }}</p>
      <br/>
      <div style="height:10px;border:1px solid #e0e0e0"></div>
      <br>
    </div>
    <flexbox class="vux-1px-tb" :gutter="0">
      <flexbox-item class="vux-1px-r test"><div>{{ $t('北京') }}</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>{{ $t('上海') }}</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>{{ $t('广州') }}</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>{{ $t('深圳') }}</div></flexbox-item>
    </flexbox>
    <flexbox class="vux-1px-b" :gutter="0">
      <flexbox-item class="vux-1px-r test"><div>{{ $t('天津') }}</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>{{ $t('西安') }}</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>{{ $t('重庆') }}</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>{{ $t('杭州') }}</div></flexbox-item>
    </flexbox>
    <flexbox class="vux-1px-b" :gutter="0">
      <flexbox-item class="vux-1px-r test"><div>{{ $t('南京') }}</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>{{ $t('武汉') }}</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div>{{ $t('成都') }}</div></flexbox-item>
      <flexbox-item class="vux-1px-r test"><div></div></flexbox-item>
    </flexbox>
    <br/>
    <flexbox class="vux-1px-tb" :gutter="0">
      <flexbox-item class="vux-1px-r">
        <a class="item item1">
          <div class="img meishi"></div>
          <div class="text">{{ $t('美食') }}</div>
        </a>
      </flexbox-item>
      <flexbox-item class="vux-1px-r">
        <a class="item item2">
          <div class="img dianying"></div>
          <div class="text">{{ $t('电影') }}</div>
        </a>
      </flexbox-item>
      <flexbox-item class="vux-1px-r">
        <a class="item item3">
          <div class="img jiudian"></div>
          <div class="text">{{ $t('酒店') }}</div>
        </a>
      </flexbox-item>
      <flexbox-item>
        <a class="item item4">
          <div class="img yule"></div>
          <div class="text">{{ $t('休闲娱乐') }}</div>
        </a>
      </flexbox-item>
    </flexbox>
    <flexbox class="vux-1px-b" :gutter="0">
      <flexbox-item class="vux-1px-r">
        <a class="item item5">
          <div class="img huoguo"></div>
          <div class="text">{{ $t('火锅') }}</div>
        </a>
      </flexbox-item>
      <flexbox-item class="vux-1px-r">
        <a class="item item6">
          <div class="img lvyou"></div>
          <div class="text">{{ $t('旅游') }}</div>
        </a>
      </flexbox-item>
      <flexbox-item class="vux-1px-r">
        <a class="item item7">
          <div class="img daijinquan"></div>
          <div class="text">{{ $t('代金券') }}</div>
        </a>
      </flexbox-item>
      <flexbox-item>
        <a class="item item8">
          <div class="img ktv"></div>
          <div class="text">{{ $t('KTV') }}</div>
        </a>
      </flexbox-item>
    </flexbox>
    <br>
  </div>
</template>

<i18n>
北京:
  en: Beijing
上海:
  en: Shanghai
广州:
  en: Guangzhou
深圳:
  en: Shenzhen
天津:
  en: Tianjin
西安:
  en: Xian
重庆:
  en: Chongqing
杭州:
  en: Hangzhou
南京:
  en: Nanjing
武汉:
  en: Whuhan
成都:
  en: Chendu
美食:
  en: Food
电影:
  en: Movie
酒店:
  en: Hotel
休闲娱乐:
  en: Entertainment
火锅:
  en: Hot pot
旅游:
  en: Travel
代金券:
  en: Coupon
KTV:
  en: KTV
对比不做处理的1px边框:
  en: Original Ugly borders
</i18n>

<script>
import { Flexbox, FlexboxItem } from 'vux'
export default {
  components: {
    Flexbox,
    FlexboxItem
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';

.vux-demo .test{
  height:50px;
  text-align:center;
  line-height: 50px;
}

.vux-demo .vux-flexbox {
  background-color: #fff;
}

.item {
  display: block;
  box-sizing: border-box;
  font-size: 12px;
  color: #303030;
  position: relative;
  margin-bottom: 10px;
}


.img {
  width: 40px;
  height: 40px;
  margin: 8px auto 5px;
  background-repeat: no-repeat;
  background-size: 40px auto!important;
  background-position: center;
}

.text {
  font-size: 13px;
  text-align: center;
  line-height: 1em;
}


.meishi {
  background: url() no-repeat
}

.dianying {
  background: url() no-repeat
}

.jiudian {
  background: url() no-repeat
}

.yule {
  background: url() no-repeat
}

.huoguo {
  background: url() no-repeat
}

.zizhucan {
  background: url() no-repeat
}

.daijinquan {
  background: url() no-repeat
}

.ktv {
  background: url() no-repeat
}

.xiaochi {
  background: url() no-repeat
}

.dangao {
  background: url() no-repeat
}

.shenghuo {
  background: url() no-repeat
}

.gouwu {
  background: url() no-repeat
}

.lvyou {
  background: url() no-repeat
}

.xiyu {
  background: url() no-repeat
}

.jinri {
  background: url() no-repeat
}

.gengduo {
  background: url() no-repeat
}

.liren {
  background: url() no-repeat
}

.yanchu {
  background: url(http://newebapp0.nuomi.bdimg.com/static/img/29dc256d21296a9476b03a5183eccdff.png) no-repeat
}

.chuancai {
  background: url() no-repeat
}

.meishi-1 {
  background: url(http://newebapp0.nuomi.bdimg.com/static/img/08190c94440e7f89f64431b0b190e242.png) no-repeat
}

.dianying-1 {
  background: url(http://newebapp0.nuomi.bdimg.com/static/img/119f0b497f0e056cb9d528a36752eb8e.png) no-repeat
}

.jiudian-2 {
  background: url() no-repeat
}

.yule-2 {
  background: url() no-repeat
}

.huoguo-2 {
  background: url() no-repeat
}

.zizhucan-2 {
  background: url() no-repeat
}

.daijinquan-2 {
  background: url() no-repeat
}

.ktv-2 {
  background: url() no-repeat
}

.xiaochi-2 {
  background: url() no-repeat
}

.dangao-2 {
  background: url() no-repeat
}

.shenghuo-2 {
  background: url() no-repeat
}

.gouwu-2 {
  background: url() no-repeat
}

.lvyou-2 {
  background: url() no-repeat
}

.xiyu-2 {
  background: url() no-repeat
}

.jinri-2 {
  background: url() no-repeat
}

.gengduo-2 {
  background: url() no-repeat
}

.liren-2 {
  background: url() no-repeat
}

.yanchu-2 {
  background: url(http://newebapp0.nuomi.bdimg.com/static/img/8ef8b87a339619dbb6e73880fadeeb2d.png) no-repeat
}

.chuancai-2 {
  background: url() no-repeat
}

</style>
